import { Carousel } from 'antd';
import { homeApis } from '../../api/methods/home'
import { useEffect, useState } from 'react';
import './style.less'


const Banner = () => {
  const [bannerData, setbannerData] = useState([]);

  useEffect(() => {
    homeApis.getbanners().then(res => {
      console.log(res);
      setbannerData(res)
    })
  }, []);

  const onChange = () => {}

  return (
    <section className="banners">
      <div className="banner-wrap">
        <Carousel afterChange={onChange} autoplay>
          {
            bannerData.map(item => {
              return (
                <div key={item.encodeId}>
                  <img src={item.imageUrl} alt="" className="banner-item" />
                </div>
              )
            })
          }
        </Carousel>
      </div>
    </section>
  )
}

export default Banner